import React, { Component } from 'react';
import { Button, Icon, message } from 'antd';
import Info from 'components/info';
import { connect } from 'react-redux';
import constants from 'share/constants';
import { messages } from 'share/common';
import { tableDecorator } from '../decorator';
import SlideFrame from 'components/slide-frame';
import InvoiceCheckForm from '../invoice-check-form';
import AdvancedTable from 'components/advanced-table';
import EditInvoiceControls from './edit-invoice-controls';
import 'styles/request-and-expense-settings/invoice-controls.scss'
import invoiceManagementService from '../invoice-management-service';

const { SimpleTable } = AdvancedTable;

@tableDecorator
class InvoiceControlsDetails extends Component {
  state = {
    info: {
      attributes: [
        {
          title: messages('expense-3.key154')/*层级*/,
          dataIndex: 'levelCode',
          span: 8,
          render: value => constants.levelCode[value]
        },
        {
          title: messages('expense-3.key155')/*所属组织*/,
          dataIndex: 'levelOrgName',
          span: 8
        },
        {
          title: messages('expense-3.key59')/*启用公司*/,
          dataIndex: 'companyNameList',
          span: 8,
          render: value => value ? value.join(',') : messages('expense-3.key60')/*通用*/
        }
      ]
    },
    columns: ['receiptTypeNo', 'receiptType', 'invoiceCheck', 'fieldList', 'operationSpecial'],
    searchColumns: ['invoiceCheck']
  };

  controlsRef = null;

  componentDidMount() {
    this.handleInitDate()
      .then();
  }

  handleInitDate = async () => {
    const { info } = this.state;
    const { params: { id } } = this.props;
    const ret = await invoiceManagementService.getInvoiceControlDetails(id);
    info.dataSource = ret.data;
    this.setState({ info });
  };

  service = (page, pageSize, searchParams) => {
    const { params: { id } } = this.props;
    return invoiceManagementService.getInvoiceControlDetails(id, {
      page,
      pageSize,
      ...searchParams
    });
  };

  handleEditDate = () => {
    const { tenant } = this.props;
    const { info: { dataSource } } = this.state;
    SlideFrame.open({
      title: messages('common.edit')/*编辑*/,
      content: InvoiceCheckForm,
      afterClose: this.afterCloseInvoiceCheckSlideFrame,
      params: {
        tenant,
        tab: 'invoice-controls',
        ...dataSource
      }
    }, this);
  };

  afterCloseInvoiceCheckSlideFrame = (flag) => {
    flag && this.handleInitDate();
  };

  handleRestore = async (res) => {
    const { info: { dataSource: { receiptDisplayOptId } } } = this.state;
    const { receiptTypeNo, invoiceCheck } = res;
    await invoiceManagementService.resetInvoiceControlDetails({
      receiptDisplayOptId,
      receiptTypeNo,
      invoiceCheck
    });
    message.success(messages('expense-3.key183')/*恢复默认成功*/);
    this.controlsRef.getList();
    await this.handleInitDate();
  };

  afterCloseInvoiceControlsSlideFrame = async (value) => {
    if (value) {
      const { info } = this.state;
      info.dataSource.rows.map((item, index) => {
        if (index === value.dataIndex) {
          item.fieldList.map(list => {
            list.value = value[list.valueCode].id;
            list.valueDesc = value[list.valueCode].name;
            return list;
          });
        }
        return item;
      });
      await invoiceManagementService.newInvoiceControl(info.dataSource);
      this.controlsRef.getList();
      await this.handleInitDate();
    }
  };

  handleEditRecord = (record, dataIndex) => {
    SlideFrame.open({
      title: messages('common.edit')/*编辑*/,
      content: EditInvoiceControls,
      afterClose: this.afterCloseInvoiceControlsSlideFrame,
      params: {
        ...record,
        dataIndex
      }
    }, this);
  };

  handleBack = () => {
    window.history.go(-1);
  };

  render() {
    const { info } = this.state;
    const { columns, searchColumns } = this.state;
    return (
      <section className="invoice-controls">
        <div style={{ marginBottom: 12 }}>
          <Info
            paragraph
            attributes={[{title: messages('expense-3.key4')/*说明*/, dataIndex: 'explain', span: 24, widthFix: false}]}
            dataSource={{explain: messages('expense-3.key184')/*您可以在此页面按发票类型配置字段 显示/必填/隐藏*/}}
          />
        </div>
        <Info title={messages('expense-3.key159')/*基础设置*/} {...info}>
          <Button onClick={this.handleEditDate} type='primary'>{messages('common.edit')/*编辑*/}</Button>
        </Info>
        <SimpleTable
          onRow={(record, index) => ({
            onClick: () => this.handleEditRecord(record, index)
          })}
          onRef={ref => this.controlsRef = ref}
          rowKey='displayRuleId'
          columns={this.handleColumns(columns)}
          service={this.service}
          searchForm={this.handleSearchForm(searchColumns)}
          pagination={null}
          footer={ <a onClick={this.handleBack} className="invoice-controls__a">
            <Icon type="rollback" style={{ marginRight: '5px' }}/>{messages('common.back')/*返回*/}
          </a>}
        >
        </SimpleTable>


      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
  };
}

InvoiceControlsDetails.propTypes = {};

export default connect(mapStateToProps)(InvoiceControlsDetails);

